<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部关键词查询 -->
      <div class="clearfix">
        <el-form :inline="true" articlesStatus class="demo-form-inline">
          <el-form-item label="关键词" style="padding:0 25px">
            <el-input v-model="articlesStatus.keyword" placeholder="请输入关键词"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="articlesStatus.state" placeholder="请选择">
              <el-option
                v-for="item in statu"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearSearch">清除</el-button>
            <el-button type="primary" @click="hSearch">搜索</el-button>
          </el-form-item>
          <el-button type="success" icon="el-icon-edit" style="float:right" @click="addArticle">新增技巧</el-button>
          <div class="msgInfo">
            <i class="el-icon-info"></i>
            数据一共{{totalCount}}条
          </div>
        </el-form>
        <div class="list">
          <!-- //列表里面内容 -->
          <el-table :data="articleList" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column label="文章标题" width="300">
              <template slot-scope="scope">
                {{scope.row.title}}
                <i
                  @click="player(scope.$index)"
                  v-if="scope.row.videoURL?true:false"
                  class="el-icon-film icon"
                ></i>
              </template>
            </el-table-column>
            <el-table-column prop="visits" label="阅读数" width="100"></el-table-column>
            <el-table-column prop="username" label="录入人"></el-table-column>
            <el-table-column label="录入时间">
              <template slot-scope="scope">{{scope.row.createTime | parseTimeByString }}</template>
            </el-table-column>
            <!-- //状态管理 -->
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.state===1">已启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <span class="addColor" @click="articlePreview(scope.row)">预览</span>
                <span v-if="scope.row.state===1" class="addColor" @click="disable(scope.row)">禁用</span>
                <span v-else class="addColor" @click="disable(scope.row)">启动</span>
                <span
                  :class="scope.row.state===0?'addColor':'disLike'"
                  @click="articleEdit(scope.row)"
                >修改</span>
                <span
                  :class="scope.row.state===0?'addColor':'disLike'"
                  @click="articleDelete(scope.row)"
                >删除</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination" style="float:right">
            <el-pagination
              background
              layout="prev, pager, next,sizes,jumper"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="articlesStatus.pagesize"
              :current-page="articlesStatus.page"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :total="totalCount"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 播放视频 -->
      <!-- element ui弹窗组件 -->
      <div class="play">
        <el-dialog
          :visible.sync="dialogPlay"
          width="40%"
          ref="videoPlaty"
          id="popVideo"
          :before-close="closeVideo"
        >
          <!-- 视频播放器 -->
          <video :src="videoUrl" controls autoplay class="video" width="100%"></video>
        </el-dialog>
      </div>
      <!-- 文章预览 -->
      <div class="preview">
        <el-dialog title="预览文章" :visible.sync="dialogArticle" width="58%">
          <articles-preview :preview="articlePreviews"></articles-preview>
        </el-dialog>
      </div>

      <!-- 新增文章/修改文章 -->
      <!-- v-if是根据弹窗关闭时删除弹窗组件，因此下次按其他文章时内容不一样 -->
      <el-dialog :title="articleEdits.id?'修改文章':'新增文章'" :visible.sync="articleAdds" width="55%" v-if="articleAdds">
        <articles-adds @closeArticle="closeArticlepop" :articleEdit="articleEdits"></articles-adds>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from './../../api/hmmm/articles'
import { status } from '@/api/hmmm/constants.js'
// 文章预览
import ArticlesPreview from './../components/articles-preview'
// 文章添加
import ArticlesAdds from './../components/articles-add'
export default {
  name: 'page-articles',
  data () {
    return {
      // 文章列表
      articlesStatus: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      // 文章列表
      articleList: [],
      // 常量
      statu: {},
      // 全部文章数量
      totalCount: 0,
      // 弹窗播放视频
      dialogPlay: false,
      videoUrl: null,
      // 弹窗文章预览
      dialogArticle: false,
      // 单文章预览
      articlePreviews: {},
      // 新增文章弹窗
      articleAdds: false,
      // 修改文章
      articleEdits: {}
    }
  },
  components: {
    // 文章预览框
    ArticlesPreview,
    // 新增文章
    ArticlesAdds
  },
  created () {
    this.loadArticleList()
  },
  methods: {
    // 文章修改
    articleEdit (item) {
      // 判断是否是发送状态
      if (item.state !== 0) {
        return false
      } else {
        // 赋值给子组件
        this.articleEdits = item
        // 打开弹窗
        this.articleAdds = true
      }
    },
    // 发布成功后关闭弹窗
    closeArticlepop (page) {
      if (page) {
        this.loadArticleList(this.articlesStatus.page = page)
      } else {
        this.loadArticleList()
      }
      this.articleAdds = false
    },
    // 新增文章
    addArticle () {
      // 弹窗
      this.articleAdds = true
      // 新增文章时给子组件赋值空值
      this.articleEdits = {}
    },
    // 文章禁用
    async disable (item) {
      try {
        if (item.state === 1) {
          item.state = 0
        } else {
          item.state = 1
        }
        const res = await changeState(item)
        console.log(res)
        this.loadArticleList()
        this.$message.success('操作成功')
      } catch (e) {}
    },
    // 文章预览
    articlePreview (item) {
      this.dialogArticle = true
      this.articlePreviews = item
      console.log(this.articlePreviews)
    },
    // 文章删除
    articleDelete (item) {
      // const res = await remove(item)
      // console.log(res)
      if (item.state !== 0) {
        return false
      } else {
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const res = await remove(item)
            console.log(res)
            this.loadArticleList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    // 关闭视频
    closeVideo () {
      this.videoUrl = ''
      this.dialogPlay = false
    },
    // 播放视频
    player (id) {
      console.log(this.articleList[id].videoURL)
      // this.$router.push(this.articleList[id].videoURL)
      // 弹窗
      this.dialogPlay = true
      // list中找到视频url地址赋值给 data
      this.videoUrl = this.articleList[id].videoURL
    },
    // 清除搜索
    clearSearch () {
      // console.log(1)
      this.articlesStatus.keyword = ''
      this.articlesStatus.state = null
      this.loadArticleList()
    },
    // 搜索功能
    hSearch () {
      this.articlesStatus.page = 1
      this.loadArticleList()
    },
    // 条数大小切换
    handleSizeChange (pageSize) {
      this.articlesStatus.pagesize = pageSize
      this.loadArticleList()
    },
    // 分页切换
    handleCurrentChange (page) {
      if (this.articlesStatus.state) {
        this.articlesStatus.state = null
        this.articlesStatus.page = page
        this.loadArticleList()
      } else {
        this.articlesStatus.page = page
        this.loadArticleList()
      }
    },
    // 获取文章类表数据
    async loadArticleList () {
      const res = await list(this.articlesStatus)
      console.log(res.data.items)
      this.articleList = res.data.items
      this.statu = status
      console.log(this.statu)
      // 全部文章数量
      this.totalCount = res.data.counts
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding: 8px 8px 8px 8px;
}
::v-deep .el-card__body {
  padding-bottom: 0;
}
.msgInfo {
  background-color: #f4f4f5;
  color: #909399;
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  padding: 0 0 10px 10px;
  border-radius: 4px;
}
.pagination {
  padding: 15px 0;
}
.list {
  span {
    margin-right: 10px;
  }
}
.addColor {
  color: #62a9ff;
  cursor: pointer;
}
.disLike {
  cursor: not-allowed;
}
.icon {
  margin-left: 5px;
  color: #1924ff;
}
.play {
  ::v-deep .el-dialog__header {
    padding: 0;
  }
  ::v-deep .el-dialog__close {
    color: #fff;
  }
  ::v-deep .el-dialog__headerbtn {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}
.video {
  display: block;
}
.preview {
  ::v-deep .el-dialog__body {
  padding-top: 0;
}
}
</style>
